<ul class="ad-nav">
  <ng-container *ngFor="let group of list">
    <ng-template [ngIf]="group._hidden !== true">
      <li class="ad-nav__item ad-nav__group-title">
        <span>{{ group.text }}</span>
      </li>
      <ng-container *ngFor="let child1 of group.children">
        <li *ngIf="child1._hidden !== true" routerLinkActive="ad-nav__selected" [routerLinkActiveOptions]="{exact: child1.linkExact}"
          class="ad-nav__item" [class.ad-nav__open]="child1._open">
          <!-- link -->
          <a *ngIf="child1._type === 1" (click)="onSelect(child1)" [routerLink]="child1.link" [target]="child1.target">
            <i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>
            <nz-tooltip *ngIf="settings.layout.collapsed" nzPlacement="right" [nzTitle]="child1.text">
              <span nz-tooltip>
                <i class="{{ child1.icon }}"></i>
              </span>
            </nz-tooltip>
            <span>{{ child1.text }}</span>
          </a>
          <!-- external link -->
          <a *ngIf="child1._type === 2" href="{{ child1.externalLink }}" target="{{child1.target}}" data-type="external">
            <i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>
            <nz-tooltip *ngIf="settings.layout.collapsed" nzPlacement="right" [nzTitle]="child1.text">
              <span nz-tooltip>
                <i class="{{ child1.icon }}"></i>
              </span>
            </nz-tooltip>
            <span>{{ child1.text }}</span>
          </a>
          <!-- has children link -->
          <a *ngIf="child1._type === 3" class="ad-nav__sub-title" (click)="toggleOpen(child1)" (mouseenter)="showSubMenu($event, child1)">
            <i class="{{ child1.icon }}"></i>
            <span>{{ child1.text }}</span>
          </a>
          <!-- badge -->
          <div *ngIf="child1.badge" title="{{child1.badge}}" class="badge badge-{{child1.badge_status}}" [class.badge-dot]="child1.badge_dot">
            <em>{{child1.badge}}</em>
          </div>
          <!-- Level 2 -->
          <ul *ngIf="child1._type === 3" class="ad-nav ad-nav__sub ad-nav__depth{{child1._depth}}">
            <ng-container *ngFor="let child2 of child1.children">
              <li *ngIf="child2._hidden !== true" routerLinkActive="ad-nav__selected" [routerLinkActiveOptions]="{exact: child2.linkExact}"
                class="ad-nav__item" [class.ad-nav__open]="child2._open">
                <!-- link -->
                <a *ngIf="child2._type === 1" (click)="onSelect(child2)" [routerLink]="child2.link" [target]="child2.target">{{ child2.text }}</a>
                <!-- external link -->
                <a *ngIf="child2._type === 2" href="{{ child2.externalLink }}" target="{{ child2.target }}" data-type="external">{{ child2.text }}</a>
                <!-- has children link -->
                <a *ngIf="child2._type === 3" class="ad-nav__sub-title" (click)="toggleOpen(child2)">
                  {{ child2.text }}
                </a>
                <!-- badge -->
                <div *ngIf="child2.badge" title="{{child2.badge}}" class="badge badge-{{child2.badge_status}}" [class.badge-dot]="child2.badge_dot">
                  <em>{{child2.badge}}</em>
                </div>
                <!-- Level 3 -->
                <ul *ngIf="child2._type === 3" class="ad-nav ad-nav__sub ad-nav__depth{{child2._depth}}">
                  <ng-container *ngFor="let child3 of child2.children">
                    <li *ngIf="child3._hidden !== true" routerLinkActive="ad-nav__selected" [routerLinkActiveOptions]="{exact: child3.linkExact}"
                      class="ad-nav__item" [class.ad-nav__open]="child3._open">
                      <!-- link -->
                      <a *ngIf="child3._type === 1" (click)="onSelect(child3)" [routerLink]="child3.link" [target]="child3.target">{{ child3.text }}</a>
                      <!-- external link -->
                      <a *ngIf="child3._type === 2" href="{{ child3.externalLink }}" target="{{ child3.target }}" data-type="external">{{ child3.text }}</a>
                      <!-- badge -->
                      <div *ngIf="child3.badge" title="{{child3.badge}}" class="badge badge-{{child3.badge_status}}" [class.badge-dot]="child3.badge_dot">
                        <em>{{child3.badge}}</em>
                      </div>
                    </li>
                  </ng-container>
                </ul>
              </li>
            </ng-container>
          </ul>
        </li>
      </ng-container>
    </ng-template>
  </ng-container>
</ul>
